import React, { Component } from 'react'
import {connect} from 'react-redux';
import {nanoid} from 'nanoid'
import {addPerson} from '../../redux/actions/person'
 class Person extends Component {

    addPerson = ()=>{
        this.props.addPerson({id: nanoid(),name:this.nameNode.value,age:this.ageNode.value});
        this.nameNode.value='';
        this.ageNode.value='';
    }

    render() {
        return (
            <div>
                name:<input ref={a => this.nameNode =a} type="text"/>&nbsp;
                age:<input ref={a => this.ageNode = a} type="text" /> &nbsp;
                <button onClick={this.addPerson}>add Person</button>
                Count组件的sum为：{this.props.count}
                <ul>
                {
                    this.props.persons.map( ele=>{
                    return <li key={ele.id}>{ele.name}--{ele.age}</li>
                    })
                }
                </ul>
            </div>
        )
    }
}




export default connect(
    state => ({persons: state.persons,count: state.count}),
    {
        addPerson
    }
)(Person);